<template>
	<view class="view">
		<view class="top_view flex justify-between align-center">
			<view class="flex align-center" @click="modifyInformationTo">
				<view class="picture"></view>
				<view class="name">
					<view class="title">
						今天喝拿铁
					</view>
					<view class="id">
						ID:89593709
					</view>
				</view>
			</view>
			<view class="code" @click="codeTo">
				<image src="@/static/images/Group 367.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="card_view">
			<view class="logo">
				logo
			</view>
			<view class="title">
				通卡
			</view>
			<view class="flex justify-between align-center" style="margin-top: 6rpx;">
				<view class="balance">
					0.00
				</view>
				<view class="button flex justify-center align-center" @click="recharge">
					充值
				</view>
			</view>
			<view class="label_view_box">
				<view class="label_view flex justify-between  align-center">
					<image src="@/static/images/Frame1.png" mode=""></image>
					<view class="label">
						门店通用
					</view>
				</view>
				<view class="label_view flex justify-between align-center">
					<image src="@/static/images/Frame.png" mode=""></image>
					<view class="label">
						尊享折扣
					</view>

				</view>
			</view>
		</view>
		<view class="function_view">
			<view class="function">
				我的功能
			</view>
			<!-- flex  -->
			<view class="function_item_box flex justify-between align-center">
				<view class="function_item flex flex-direction align-center" v-for="(item,index) in images" :key="index"
					@click="To(index)">
					<image :src="item.url" mode=""></image>
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="ball_view flex justify-center">
			<image style="width: 400rpx; height: 400rpx;" src="../../static/images/ball.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	let data = reactive({
		userIfon: null,
		list: []
	})
	let images = reactive([{
		title: "优惠券",
		url: "../../static/images/coupon.png"
	}, {
		title: "系统信息",
		url: "../../static/images/message.png"
	}, {
		title: "设置",
		url: "../../static/images/set.png"
	}, {
		title: "加入我们",
		url: "../../static/images/Join.png"
	}, {
		title: "开台操作指引",
		url: "../../static/images/guide.png"
	}, ])

	function codeTo() {
		uni.navigateTo({
			url: "/pagesMy/qrCode/index"
		})
	}

	function To(index) {
		switch (index) {
			case 0:
				uni.navigateTo({
					url: "/pagesMy/coupon/index"
				})
				break;
			case 2:
				uni.navigateTo({
					url: "/pagesMy/setUp/index"
				})
				break;
			default:
				break;
		}
	}

	function recharge() {
		uni.navigateTo({
			url: "/pagesMy/recharge/index"
		})
	}

	function modifyInformationTo() {
		uni.navigateTo({
			url: "/pagesMy/modifyInformation/index"
		})
	}
	onShow(() => {
		data.userIfon = getApp().globalData.userIfon
		console.log(data.userIfon)
	})
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		// background-image: url('@/static/images/topBg.png');
		background-repeat: no-repeat;
		background-position: top;
	}

	.view {
		padding: 0 32rpx;
	}

	.top_view {
		margin-top: 50rpx;

		.picture {
			width: 108rpx;
			height: 108rpx;
			background: #D9D9D9;
			border-radius: 50%;
		}

		.name {
			margin-left: 20rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.id {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}

		.code image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.card_view {
		margin-top: 44rpx;
		height: 272rpx;
		// background-image: url('@/static/images/memberBg.png');
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100%;
		// background-position: left;
		padding: 0 32rpx;

		.logo {
			text-align: right;
			font-family: zihunquyuanhei, zihunquyuanhei;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
			padding-top: 44rpx;
			margin-right: 58rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #EFF0FF;
		}

		.balance {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
			color: #EFF0FF;
		}

		.button {
			width: 140rpx;
			height: 50rpx;
			background: linear-gradient(198deg, #9CFBFE 0%, #8892FF 53%, #6B45FA 100%);
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.25);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.label_view_box {
			display: flex;
			align-items: center;
			margin-top: 12rpx;


			.label_view {
				padding: 0 12rpx;
				width: 144rpx;
				height: 44rpx;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 1rpx solid #FFFFFF;

				&:last-child {
					margin-left: 20rpx;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;


				}
			}

		}
	}

	.function_view {
		margin-top: 32rpx;
		height: 194rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.function {
			display: block;
			padding: 24rpx 0 0 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.function_item_box {
			margin: 20rpx 42rpx 0 40rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
			}
		}


	}

	.ball_view {
		margin-top: 100rpx;

	}
</style>